<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  div {
    width: 100px;
    height: 50px;
    background: red;
    margin: 10px;
  }
</style>
<script>
  window.onload = function () {
    let divs = document.getElementsByTagName("div")
    for (let i = 0; i < divs.length; i++) {
      const item = divs[i]
      item.timer = null
      item.onmouseover = function () {
        startMove(this, 400)
      }
      item.onmouseout = function () {
        startMove(this, 100)
      }

    }
  }


  //let timer = null

  function startMove(obj, target) {
    clearInterval(obj.timer)
    obj.timer = setInterval(() => {
      let speed = (target - obj.offsetWidth) / 6
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)
      if (obj.offsetWidth == target) {
        clearInterval(obj.timer)
      } else {
        obj.style.width = obj.offsetWidth + speed + "px"
      }
    }, 30);
  }

</script>

<body>


  <div></div>
  <div></div>
  <div></div>


</body>

</html>